<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" href="../css/animate.css"/>
    <link rel="stylesheet" href="../css/delay.css"/>
    <style>
        .left_box{
            width: 100%;
            height: auto;
            position: fixed;
        }
        h1,h2,h3,h4,h5,h6,ul,p,li,body{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .box_1{
            width: 35.5%;
            height: 100vh;
            background-image: url("../imgs/1.jpg");
            background-position: 100% 100%;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: relative;
        }
        .box_1_img{
            width: 105px;
            height: 105px;
            border-radius: 50%;
            background-color: #00619a;
            position: absolute;
            right: 50px;
            top: 160px;
            overflow:hidden

        }
        .box_1_h3{
            color: #fff;
            position: absolute;
            right: 75px;
            top: 275px;
        }
        .box_1_box{
            width: 250px;
            height: 50px;
            position: absolute;
            right: 75px;
            top: 320px;
        }
        .box_1_box_p{
            color: #ffffff;
            font-size: 12px;
        }
        .right_box{
            width:64.5%;
            height: auto;
            position: absolute;
            right: 0;
        }
        .Essential_information{
            width: 100%;
            height: 320px;
            position: relative;
        }
        .Essential_information_box{
            width: 70%;
            height: 200px;
            position: absolute;
            bottom: 20px;
            left: 50px;
        }
        .Essential_information_box_1 > img{
            width: 35px;
            vertical-align: middle;
        }
        .Essential_information_box_1 > span{
            color: #717171;
            font-size: 25px;
            font-weight: bolder;
            vertical-align: middle;
        }
        .Essential_information_box_2{
            width: 70%;
            height: 150px;
            margin-top: 15px;
            margin-left: 45px;
        }
        .myul > li{
            width: 35%;
            height: 75px;
            float: left;
            padding-left: 60px;
            position: relative;
        }
        .myul_ul_1 > img{
            width: 50px;
            position: absolute;
            left: 0;
            top: 12px;
            line-height: 75px;
        }
        .myul_span_1{
            color: #8E8E8E;
            font-size: 13px;
            line-height: 75px;
        }
        .Essential_information_box_3{
            width: 100%;
            height: 150px;
            margin-left: 50px;
            margin-top: 20px;
        }
        .Essential_information_box_3_1{
            width: 100%;
            height: auto;
        }
        .Essential_information_box_3_1 > div{
            width: 30.33%;
            height: auto;
            float: left;
            color: #E7804F;
        }
        .box_2 > p{
            color: #666666;
            line-height: 30px;
        }
        .box3{
            width: 60%;
            height: 100px;
            margin-top: 20px;
            margin-left: 40px;
        }
        .box3 > div{
            width: 80px;
            height: 100px;
            text-align: center;
            float: left;
        }
        .box3 > div > img{
            width: 50px;
        }
        .box3 > div > p{
            color: #666666;
            font-size: 13px;
            line-height: 50px;
        }
    </style>
</head>

<body style="background-color: #F2F2F2">
    <div class="left_box">
        <div class="box_1">
            <div class="box_1_img animated bounceInUp">
                <img style="width: 180px;position: relative;left: -60px;top: -35px;" src="../imgs/psb.jpg" alt=""/>
            </div>
            <h2 class="box_1_h3 ">个人简历</h2>
            <div class="box_1_box">
                <p class="box_1_box_p animated slideInLeft">我不去想身后会不会袭来寒风冷雨，既然目标是地平线，留给世界的只能是背影。</p>
            </div>
        </div>
    </div>
    <div class="right_box">
        <!--基本信息-->
        <div class="Essential_information">
            <div class="Essential_information_box">
                <div class="Essential_information_box_1 animated bounceInUp delay05">
                    <img src="../imgs/电脑.png" alt=""/>&nbsp;&nbsp;&nbsp;
                    <span>基本信息</span>
                </div>
                <div class="Essential_information_box_2">
                    <ul class="myul">
                        <li class="myul_ul_1">
                            <img src="../imgs/自我介绍.png" alt=""/>&nbsp;&nbsp;
                            <span class="myul_span_1">张武生</span>&nbsp;&nbsp;
                            <span class="myul_span_1">汉</span>&nbsp;&nbsp;
                            <span class="myul_span_1">男 &nbsp;&nbsp;&nbsp;22岁</span>
                        </li>
                        <li class="myul_ul_1">
                            <img style="width: 45px;" src="../imgs/地址.png" alt=""/>&nbsp;
                            <span class="myul_span_1">四川省成都市</span>
                        </li>
                        <li class="myul_ul_1">
                            <img style="width: 45px;" src="../imgs/电话.png" alt=""/>&nbsp;&nbsp;
                            <span class="myul_span_1">15196238689</span>
                        </li>
                        <li class="myul_ul_1">
                            <img src="../imgs/信封.png" alt=""/>&nbsp;&nbsp;
                            <span style="position: absolute;top: 0;" class="myul_span_1">zhangwusheng1995@163.com</span>
                        </li>
                        <li class="myul_ul_1">
                            <img style="width: 60px;" src="../imgs/职位%20(2).png" alt=""/>&nbsp;&nbsp;&nbsp;
                            <span style="position: absolute;top: 0;" class="myul_span_1">前端工程师</span>
                        </li>
                        <li class="myul_ul_1">
                            <img style="width: 40px;" src="../imgs/工资.png" alt=""/>&nbsp;&nbsp;&nbsp;
                            <span style="position: absolute;top: 0;" class="myul_span_1">4K+</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--教育背景-->
        <div class="Essential_information" style="height:300px;">
            <div class="Essential_information_box">
                <div class="Essential_information_box_1 animated bounceInUp delay06">
                    <img style="width: 55px;" src="../imgs/教育背景.png" alt=""/>
                    <span>教育背景</span>
                </div>
                <div class="Essential_information_box_3">
                    <div class="Essential_information_box_3_1">
                        <div>2014/09--2017/06</div>
                        <div>广安职业技术学院</div>
                        <div>专业：建筑工程技术</div>
                    </div>
                </div>
            </div>
        </div>
        <!--工作实习经历-->
        <div class="Essential_information" style="height:230px;margin-top: -40px">
            <div class="Essential_information_box">
                <div class="Essential_information_box_1 animated bounceInUp delay07">
                    <img style="width: 35px;" src="../imgs/工作经历.png" alt=""/>&nbsp;&nbsp;&nbsp;
                    <span>工作经历</span>
                </div>
                <div class="Essential_information_box_3">
                    <div class="Essential_information_box_3_1">
                        <div>2016/12--2017/05</div>
                        <div>千胜信息技术有限公司</div>
                        <div>前端实习生</div>
                    </div>
                    <br/>
                    <br/>
                    <div>
                        <p style="color: #666666">6个月中担任前端实习生的过程中参加过一些类似CORM项目，类似链家的项目等。</p>
                    </div>
                </div>
            </div>
        </div>
        <!--自我介绍-->
        <div class="Essential_information" style="height:230px;margin-top: -40px">
            <div class="Essential_information_box">
                <div class="Essential_information_box_1 animated bounceInUp delay08">
                    <img style="width: 35px;" src="../imgs/自我介绍.png" alt=""/>&nbsp;&nbsp;&nbsp;
                    <span>自我评价</span>
                </div>
                <div class="Essential_information_box_3">
                    <div class="box_2">
                        <p>1：    拥有较强的组织能力和适应能力、并具有较强的管理策划与组织管理协调能力。</p>
                        <p>2：	不断更新充实自我，善于学习，以适应信息化时代。 </p>
                        <p>3：	具备良好的心理素质，个人修养，个人关系以及良好的团队工作精神。 </p>
                        <p>4：	反应能力，应变能力强，踏实勤奋，节奏快，效率高。</p>
                        <p>5：	能很好很快接受新事物，具有较强的学习能力。</p>
                        <p>6：	有激情，有进取精神，工作认真踏实。</p>
                    </div>

                </div>
            </div>
        </div>
        <!--软件技能-->
        <div class="Essential_information" style="height:230px;margin-top: 60px">
            <div class="Essential_information_box">
                <div class="Essential_information_box_1 animated bounceInUp delay09">
                    <img style="width: 35px;" src="../imgs/技能.png" alt=""/>&nbsp;&nbsp;&nbsp;
                    <span>软件技能</span>
                </div>
                <div class="Essential_information_box_3">
                    <div class="box_2">
                        <p>1：掌握并能熟练运用Word、ppt、Excel等office办公软件;</p>
                        <p>2 : 熟悉submit，webstrom编程软件，熟悉HTML语言和样式表，并且能够熟练</p>
                        <p>的使用DIV+CSS进行网页排版及设计，擅长将网页原图模型转化成静态网页。</p>
                        <p>3：熟悉javscript语言运用，掌握jQuery。</p>
                        <p>4：能够熟练运用bootstrap，frozenUI等框架编写网页。</p>
                    </div>
                </div>
            </div>
        </div>
        <!--文章-->
        <div class="Essential_information" style="height:230px;margin-top: 60px">
            <div class="Essential_information_box">
                <div class="Essential_information_box_1 animated bounceInUp delay09">
                    <img style="width: 35px;" src="../imgs/技能.png" alt=""/>&nbsp;&nbsp;&nbsp;
                    <span>文章</span>
                </div>
                <div class="Essential_information_box_3">
                    <div class="box_2">
                        <a style="text-decoration: none;color: #666666" href="http://web.cdqsedu.com/tags/张武生"><p>http://web.cdqsedu.com/tags/张武生</p></a>
                    </div>
                </div>
            </div>
        </div>
        <!--兴趣爱好-->
        <div class="Essential_information" style="height:230px;margin-top: -50px">
            <div class="Essential_information_box">
                <div class="Essential_information_box_1 animated bounceInUp delay09">
                    <img style="width: 35px;" src="../imgs/兴趣爱好.png" alt=""/>&nbsp;&nbsp;&nbsp;
                    <span>兴趣爱好</span>
                </div>
                <div class="box3">
                    <div>
                        <img id="img_1" src="../imgs/电脑.png" alt=""/>
                        <p>电脑</p>
                    </div>
                    <div>
                        <img id="img_2" src="../imgs/icon_唱歌.png" alt=""/>
                        <p>唱歌</p>
                    </div>
                    <div>
                        <img id="img_3" src="../imgs/吉他.png" alt=""/>
                        <p>吉他</p>
                    </div>
                    <div>
                        <img id="img_4" src="../imgs/阅读.png" alt=""/>
                        <p>阅读</p>
                    </div>
                    <div>
                        <img id="img_5" src="../imgs/跑步.png" alt=""/>
                        <p>跑步</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>